<template>
	<view class="base-page" style="background: #F3F4F6;">
		<view class="">
			<view class="yangsf-padding-30">
				<span class="role_text">请选择您的角色</span>
			</view>
			<view class="card_kind">
				<!-- <view class="card_1" @click="toPage('1')">
					出借人
				</view>
				<view class="card_2" @click="toPage('0')">
					借款人
				</view> -->

				<view class="card_base" @click="toPage('1')">

					<view class="card_base_main">
						我是出借方
						<view class="card_base_main_icon">
							<u-icon name="play-right-fill" color="#5B86E5"></u-icon>
						</view>
					</view>
					<view class="card_base_text">
						我借给别人钱
					</view>
				</view>
				<view class="card_base" @click="toPage('0')">
					<view class="card_base_main">
						我是借款方
						<view class="card_base_main_icon">
							<u-icon name="play-right-fill" color="#5B86E5"></u-icon>
						</view>
					</view>
					<view class="card_base_text">
						我向别人借钱
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1
			}
		},
		onLoad(opthon){
			console.log("父页面参数传递 ==> {}", opthon)
			this.type = opthon.type
			console.log("this.type ==> {}", this.type)
		},
		methods: {
			toPage(kind) {
				if(this.type == 1){
					uni.$u.route('/pages/contract/addSign', {
						kind: kind
					});
				}
				else if(this.type == 2){
					uni.$u.route('/pages/contract/addSignFenQi', {
						kind: kind
					});
				}
				else{
					uni.$u.toast("借条类型异常，请返回首页重新发起")
				}
			}
		}
	}
</script>

<style scoped>
	.role_text {
		font-size: 24px;
	}

	.card_kind {
		margin-top: 120rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.card_base {
		width: 80%;
		height: 160rpx;

		margin-top: 20px;
		background-color: #fff;
		border-radius: 10px;

		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}

	.card_base_main {

		margin-left: 20px;

		display: flex;
		align-items: center;

		font-size: 36rpx;
		font-weight: bold;
	}

	.card_base_text {
		margin-left: 20px;
		margin-top: 10px;
		font-size: 28rpx;
		color: #909090;
	}

	.card_1 {
		align-self: flex-end;

		/* background-color: #FFEB3C; */
		/* background-image: linear-gradient(to right, #f7797d, #fbd786, #c6ffdd); */
		background-image: linear-gradient(to right, #0083fe, #00fff0);
		width: 60%;
		height: 150rpx;
		border-radius: 30px 0 0 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card_2 {
		align-self: flex-start;

		margin-top: 30rpx;


		background-image: linear-gradient(to left, #0083fe, #00fff0);
		/* background-color: #0094FF; */
		width: 60%;
		height: 150rpx;
		border-radius: 0 30px 10px 0;

		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>